<template>
  <el-dialog
    :title="`${drawerProps.title}绩效评估`"
    v-model="drawerVisible"
    :draggable="true"
    :overflow="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="30px"
    width="800px"
    :destroy-on-close="true"
  >
    <el-form
      ref="ruleFormRef"
      style="overflow-y: auto"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      label-width="120px"
      label-position="top"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-alert type="warning" description="对绩效评估有异议请及时和上级沟通" show-icon> </el-alert>
      <group-title title="评估信息"></group-title>
      <el-row>
        <form-item title="周期类型" prop="performanceType" :title-span="4" :item-span="8">
          <common-select
            data-key="performanceType"
            placeholder="周期类型"
            :request-api="() => apiService.findClassify('performanceType')"
            :config="{ label: 'name', value: 'value' }"
            v-model="drawerProps.row!.performanceType"
          ></common-select>
        </form-item>
        <form-item title="评估时间" prop="performanceDate" :title-span="4" :item-span="8">
          <el-date-picker
            style="width: 100%"
            type="month"
            v-model="drawerProps.row!.performanceDate"
            placeholder="请选择"
          ></el-date-picker>
        </form-item>
      </el-row>
      <el-row>
        <form-item title="绩效等级" prop="level" :title-span="4" :item-span="8">
          <common-select
            data-key="PERFORMANCE_LEVEL"
            :request-api="() => apiService.findClassify('PERFORMANCE_LEVEL')"
            v-model="drawerProps.row!.level"
          ></common-select>
        </form-item>
        <form-item title="综合评分" prop="avgScore" :title-span="4" :item-span="8">
          <el-input-number
            style="width: 100%"
            :min="0"
            :max="2"
            :step="0.1"
            :precision="1"
            v-model="drawerProps.row!.avgScore"
          ></el-input-number>
        </form-item>
      </el-row>
      <group-title title="评价信息"></group-title>
      <el-row>
        <el-card class="w-full">
          <span v-if="drawerProps.row.summary" v-html="drawerProps.row.summary"></span>
          <span v-else>上级对你没留下什么评价 - _ -</span>
        </el-card>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref } from "vue";
import { Performance } from "@/api/types/base";
import apiService from "@/api/services/apiService";
import groupTitle from "@/components/application/form/group-title.vue";
import formItem from "@/components/application/form/form-item.vue";
import commonSelect from "@/components/SelectFilter/common-select.vue";
import { ElMessage } from "element-plus";

interface DrawerProps {
  title: string;
  tbName: string;
  isView: boolean;
  row: Partial<Performance>;
  api?: (tabName: string, params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  tbName: "",
  row: {}
});

// 接收父组件传过来的环境
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

// 提交数据
const handleSubmit = async () => {
  try {
    if (drawerProps.value.row.state === "0") {
      drawerProps.value.row.state = "1";
      await drawerProps.value.api!(drawerProps.value.tbName, drawerProps.value.row);
      ElMessage.success({ message: "已查看绩效评价" });
      drawerProps.value.getTableList!();
    }
    drawerVisible.value = false;
  } catch (error) {
    console.log(error);
  }
};

defineExpose({
  acceptParams
});
</script>
